﻿<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-table-expandable.js表格行展开插件</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- INCLUDES -->
    <link rel="stylesheet" href="css/bootstrap-table-expandable.css">
    <script src="js/bootstrap-table-expandable.js"></script>

</head>
<body>

    <div class="container">
        <table class="table table-hover table-expandable">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Population</th>
                    <th>Area</th>
                    <th>Official languages</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>United States of America</td>
                    <td>306,939,000</td>
                    <td>9,826,630 km2</td>
                    <td>English</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <h4>Additional information</h4>
                        <ul>
                            <li>USA on Wikipedia</li>
                            <li>National Atlas of the United States</li>
                            <li>这里显示更多信息</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>United Kingdom </td>
                    <td>61,612,300</td>
                    <td>244,820 km2</td>
                    <td>English</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <h4>Additional information</h4>
                        <ul>
                            <li>USA on Wikipedia</li>
                            <li>National Atlas of the United States</li>
                            <li>这里显示更多信息2</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>India</td>
                    <td>1,147,995,904</td>
                    <td>3,287,240 km2</td>
                    <td>Hindi, English</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <h4>Additional information</h4>
                        <ul>
                            <li>USA on Wikipedia</li>
                            <li>National Atlas of the United States</li>
                            <li>这里显示更多信息3</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Canada</td>
                    <td>33,718,000</td>
                    <td>9,984,670 km2</td>
                    <td>English, French</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <h4>Additional information</h4>
                        <ul>
                            <li>USA on Wikipedia</li>
                            <li>National Atlas of the United States</li>
                            <li>这里显示更多信息4</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>Germany</td>
                    <td>82,060,000</td>
                    <td>357,021 km2</td>
                    <td>German</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <h4>Additional information</h4>
                        <ul>
                            <li>USA on Wikipedia</li>
                            <li>National Atlas of the United States</li>
                            <li>这里显示更多信息5</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>

 
</body>
</html>
